<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem ><Icon type="md-apps" /> 个人设置</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <div slot="header" class="clearfix">
                <span>个人设置</span>
            </div>
            <div class="text item">
                <Form ref="form" :model="form" :label-width="140" :rules="rules">
                    <Row :gutter="20">
                        <Col :span="10">
                            <FormItem label="账号" prop="user">
                                {{form.user}}
                            </FormItem>
                            <FormItem label="姓名" prop="name">
                                <Input v-model="form.name"></Input>
                            </FormItem>
                            <FormItem label="邮箱" prop="email">
                                <Input v-model="form.email"></Input>
                            </FormItem>
                            <FormItem label="手机" prop="mobile">
                                <Input v-model="form.mobile"></Input>
                            </FormItem>
                            <FormItem label="昵称" prop="nickname">
                                <Input v-model="form.nickname"></Input>
                            </FormItem>
                            <FormItem label="医院">
                                <Input v-model="form.hospital"></Input>
                            </FormItem>
                            <FormItem label="科室">
                                <Input v-model="form.dep"></Input>
                            </FormItem>
                            <FormItem label="修改密码">
                                <Checkbox v-model="form.change_pwd"></Checkbox>
                            </FormItem>
                            <Card v-if="form.change_pwd">
                                <FormItem label="输入旧密码" prop="old_pwd">
                                    <Input v-model="form.old_pwd"></Input>
                                </FormItem>
                                <FormItem label="输入新密码" prop="new_pwd">
                                    <Input v-model="form.new_pwd"></Input>
                                </FormItem>
                                <FormItem label="再次输入新密码" prop="renew_pwd">
                                    <Input v-model="form.renew_pwd"></Input>
                                </FormItem>
                            </Card>
                            <FormItem>
                                <Button type="primary" icon="md-checkmark" @click="save">提 交</Button>
                                <Button icon="md-refresh" @click="cancel">重 置</Button>
                            </FormItem>
                        </Col>
                        <Col :span="8" style="text-align:center;">
                            <img :src="form.avatar" style="margin-top: 50px;margin-bottom: 20px;width:150px;"/>
                            <Upload
                                :action="uploadApi"
                                :headers="headers"
                                :on-success="onSuccess"
                                accept="image/*"
                                >
                                <Button size="small" type="primary">上传头像</Button>
                            </Upload>
                        </Col>
                    </Row>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                url: pub.apiDomain + 'admin/',
                change_pwd: false,
                form: {
                    
                },
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' },
                        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
                    ],
                    email:[{type: 'email', message: '不是有效的邮箱', trigger: 'blur' }],
                    mobile:[{ validator: pub.checkPhone, trigger: 'blur'}],
                    old_pwd: { required: true, message: '请输入旧密码', trigger: 'blur'},
                    new_pwd: [{ required: true, message: '请输入新密码', trigger: 'blur'}, { min: 6, message: '密码至少要6位', trigger: 'blur' }],
                    renew_pwd: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'},
                        {validator: (rule, value, callback) => {
                            if(this.form.new_pwd != value) {
                                return callback(new Error('两次输入的新密码不一致，请重新输入'));
                            }
                            return callback();
                        }, trigger: 'blur'}
                    ],
                },
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //加载内容
            getData(){
                this.$axios.get(this.url + 'get/id/' + pub.admin('id')).then(res => {
                    this.form = res.d;
                });
            },
            cancel(){
                this.getData();
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/edit', this.form).then((res) => {
                            this.$Message.success('更新成功！');
                            this.form.old_pwd = '';
                            this.form.new_pwd = '';
                            this.form.renew_pwd = '';
                            this.form.change_pwd = false;
                            this.bus.$emit('change_userinfo', this.form);
                        })
                    } else {
                        return false;
                    }
                });
            },
            onSuccess(res, file, fileList) {
                this.form.avatar = res.m;
            },
        }
    }
</script>
<style>
.el-upload{width:auto;height:auto;border:none;}
.mt10{margin-top:10px;}
</style>

